<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>目睹云更新</title>
    <style>
        html,body {
            padding: 0;
            margin: 0;
            background: #f5f5f5;
        }
        #app{
            margin: 0 auto;
            margin-bottom: 20px;
            text-align: center;
            max-width: 560px;
            padding: 0 10px;
        }
        .center {
            text-align: center;
            justify-content: center;
        }
        .panel {
            margin-top: 16px;
            border-radius: 5px;
            background: #fff;
            display: inline-block;
            width: 100%;
            box-shadow: 0 0 5px 0px rgba(0,0,0,.3);
            position: relative;
        }
        .panel-require:after {
            position: absolute;
            top: 6px;
            left: 6px;
            color: #f00;
            content: '*'
        }
        .form-item {
            width: 100%;
            display: flex;
            padding: 20px 0;
        }
        .form-item-label {
            width: 100px;
        }
        .form-item-content {
            flex: 1;
            text-align: left;
        }
        input,select {
            width: 90%;
        }
        textarea {
            width: 90%;
            height: 80px;
        }
        @media (max-width: 600px) {
        
            .form-item {
                flex-direction: column;
            }
            .form-item-content {
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <h4 class="center">目睹云更新(开发填写)</h1>
        <!-- <div class="panel panel-require">
            <div class="form-item">
                <div class="form-item-label">更新批次: </div>
                <div class="form-item-content">
                    <input type="text">
                </div>
            </div>
        </div> -->
        <div class="panel panel-require">
            <div class="form-item">
                <div class="form-item-label">更新环境: </div>
                <div class="form-item-content">
                        <select v-model="env">
                            <option value="">请选择</option>
                            <option value="testservice">测试服</option>
                            <option value="online">线上</option>
                        </select>
                </div>
            </div>
        </div>
        <div class="panel panel-require">
            <div class="form-item">
                <div class="form-item-label">更新服务: </div>
                <div class="form-item-content">
                    <input type="text" v-model="svcname" placeholder="填写k8s服务名称">
                </div>
            </div>
        </div>
        <div class="panel panel-require">
            <div class="form-item">
                <div class="form-item-label">更新内容: </div>
                <div class="form-item-content">
                    <textarea style="" v-model="content"></textarea>
                </div>
            </div>
        </div>
        <div class="panel panel-require">
            <div class="form-item">
                <div class="form-item-label">申请人(一般写你自己): </div>
                <div class="form-item-content">
                    <input type="text" v-model="person">
                </div>
            </div>
        </div>
        <div class="panel panel-require">
                <div class="form-item">
                    <div class="form-item-label">镜像地址: </div>
                    <div class="form-item-content">
                        <input type="text" v-model="image">
                    </div>
                </div>
            </div>
        <div class="panel panel-require">
            <div class="form-item">
                <div class="form-item-label">goose更新: </div>
                <div class="form-item-content">
                    <select v-model="hasGoose">
                        <option value="">请选择</option>
                        <option value="n">没有goose更新</option>
                        <option value="y">有migrations, 需要goose更新</option>
                    </select>
                    <textarea v-if="hasGoose === 'y'" v-model="goose" placeholder="请填写goose需要更新哪些sql文件，以及其他注意事项" style="margin-top: 16px;"></textarea>
                </div>
            </div>
        </div>
        <div class="panel panel-require">
            <div class="form-item">
                <div class="form-item-label">环境变量更新: </div>
                <div class="form-item-content">
                    <select v-model="hasEnvVar">
                        <option value="">请选择</option>
                        <option value="n">没有环境变量更新</option>
                        <option value="y">有环境变量更新</option>
                    </select>
                    <textarea v-if="hasEnvVar === 'y'" v-model="envVar" placeholder="如果有环境变量，请列出环境变量名和要设置的值" style="margin-top: 16px;"></textarea>
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="form-item">
                <div class="form-item-label">其他: </div>
                <div class="form-item-content">
                    <textarea v-model="other" placeholder="其他更新注意事项，比如要和另一个服务一起/先后更新"></textarea>
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="form-item center">
                <input type="button" @click="submit()" style="background-color:#68a3fa;color: #fff; line-height: 40px; font-size: 20px;" value="提交">
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                env: '',
                svcname: '',
                content: '',
                person: '',
                image: '',
                hasGoose: '',
                goose: '',
                hasEnvVar: '',
                envVar: '',
                other: '',
            },
            methods: {
                submit: function () {
                    if (!this.env) {
                        alert('请选择更新环境')
                        return
                    }
                    if (!this.svcname) {
                        alert('请填写要更新的服务名称')
                        return
                    }
                    if (!this.content) {
                        alert('请填写更新内容')
                        return
                    }
                    if (!this.person) {
                        alert('请填写申请人')
                        return
                    }
                    if (!this.image) {
                        alert('请填写镜像地址')
                        return
                    }
                    if (!this.hasGoose) {
                        alert('请选择是否需要执行goose更新')
                        return
                    }
                    if (this.hasGoose === 'y' && !this.goose) {
                        alert('请填写goose更新内容')
                        return
                    }
                    if (!this.hasEnvVar) {
                        alert('请选择是否需要更新环境变量')
                        return
                    }
                    if (this.hasEnvVar === 'y' && !this.envVar) {
                        alert('请填写要更新的环境变量')
                        return
                    }

                    var envVar = this.hasEnvVar === 'y' ? this.envVar : 'none'
                    var goose = this.hasGoose === 'y' ? this.goose : 'none'
                    var other = this.other ? this.other : 'none'
                    var product = 'myun'

                    // var url = '/update/' + product + 
                    //     '/' + encodeURIComponent(this.env) + 
                    //     '/' + encodeURIComponent(this.svcname) +
                    //     '/' + encodeURIComponent(this.image) + 
                    //     '/' + encodeURIComponent(goose) + 
                    //     '/' + encodeURIComponent(envVar) +
                    //     '/' + encodeURIComponent(this.content) + 
                    //     '/' + encodeURIComponent(other) + 
                    //     '/' + encodeURIComponent(this.person)
                    var url = '/update'
                    
                    var data = {
                        product: product,
                        env: this.env,
                        svcname: this.svcname,
                        image: this.image,
                        goose: goose,
                        env_var: envVar,
                        content: this.content,
                        other: other,
                        person: this.person
                    }
                    
                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(data)
                    })
                        .then(function (resp) {
                            console.log(resp)
                            if (resp.status === 200) {
                                alert('更新成功')
                            } else{
                                alert('更新失败: ' + resp.status)
                            }
                        })
                }
            }
        })
    </script>
</body>
</html>